<template>
  <k-form-modal
    drawer
    width="middle"
    title="打款审核"
    label-width="100px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <el-form-item label="申请结算金额">
      ￥{{ rowData.total_fee }}
    </el-form-item>
    <el-form-item label="打款信息">
      用户：{{ rowData.bank_account }}<br />
      开户行：{{ rowData.bank_name }}<br />
      银行卡号：{{ rowData.bank_no }}<br />
      联行号：{{ rowData.bank_no || "--" }}
    </el-form-item>
    <el-form-item label="开票信息">
      <ImgDownPreview v-for="url in urlList" :key="url" :url="url" />
    </el-form-item>
    <el-form-item
      label="打款审核"
      prop="status"
      :rules="[{ required: rowData.status === 0 ?true : false, message: '请选择' }]"
    >
      <el-radio-group v-model="state.model.status" :disabled="rowData.status !== 0">
        <el-radio
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.value"
        >{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      v-if="state.model.status !== 2"
      label="实际需打款"
      prop="remittance_fee"

      :rules="rowData.status=== 0 ? [
        { required: state.model.status === 1, message: '请选输入实际需打款金额' },
        { pattern: /^[0-9]+\.{0,1}[0-9]{0,5}$/, message: '请输入数字', trigger: ['change', 'blur'] }
      ]:[]"
    >
      <el-input v-model="state.model.remittance_fee" :disabled="rowData.status!== 0" clearable placeholder="请输入实际打款金额" maxlength="10" />
    </el-form-item>
    <el-form-item label="备注说明" prop="remark">
      <el-input
        v-model="state.model.remark"
        maxlength="200"
        allow-clear
        :disabled="rowData.status!== 0"
        placeholder="请输入备注信息"
        show-word-limit
        type="textarea"
        rows="4"
      />
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang='ts'>
import { ref, computed } from 'vue';
import { useFormModal } from '@crud/index';
import { cashCheck } from '@/api/crm-agency/dyj/cash';
import { ElMessage } from 'element-plus';
import { ImgDownPreview } from '@/components/base-img';
defineOptions({
  name: 'RemitExamineModal'
});
const emits = defineEmits(['success']);
const rowData = ref<Record<string, any>>({});
const statusOptions = ref([
  { label: '同意申请', value: 1 },
  { label: '申请驳回', value: 2 }
]);
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    remark: '',
    remittance_fee: undefined,
    status: null,
    colonel_id: undefined,
    cash_id: undefined,
    total_fee: undefined
  },
  rules: {},
  onShow: (mode = 0, data: any) => {
    rowData.value = {};
    if (data) {
      rowData.value = data;
      state.model = {
        ...state.model,
        colonel_id: data.colonel_id,
        cash_id: data.cash_id,
        total_fee: data.total_fee
      };
      // 待审核
      if (data.status === 0) {
        return;
      }
      state.model = {
        ...state.model,
        remark: data.remark,
        status: data.status,
        remittance_fee: `￥${data.remittance_fee}`
      };
    }
  },
  onSubmit: async (model: any, mode = 0) => {
    if (mode === 1) {
      if (rowData.value.status !== 0) {
        return;
      }
      // const loading = ElLoading.service({
      //   lock: true,
      //   text: 'Loading',
      //   background: 'rgba(255, 255, 255, 0.7)'
      // });
      const res = await cashCheck({
        ...model,
        status: model.status || 0,
        remittance_fee: model.status === 1 ? model.remittance_fee: undefined
      });
      if (!res.err) {
        ElMessage.success('操作成功');
        emits('success');
      }
      return res;
    }

  }
});
/**
 * @图片
 */
const urlList = computed(() => {
  const { invoice_url } = rowData.value;
  if (invoice_url) {
    const list = invoice_url.split(';');
    return list;
  }
  return [];
});
defineExpose({
  show: methods.show
});
</script>
<style scoped lang="scss">
:deep(.img-down-preview) {
  margin-right: 10px;
}
</style>
